I am getting an error while trying to add a PNG or SVG file to my code. What is my mistake is or what do I have to change to get it working?
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Maintenance</title>
<meta name="description" content="This Website is in Maintenance Mode" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className={styles.main}>
<h1 className={styles.h1}>This website is currently in</h1>
<break></break>
<h1 className={styles.h2}>Maintenance Mode.</h1>
<Image
src="/public/logoicon/logoOrange.png"
alt="server and database with broken cable"
width={77}
height={33}
/>
<p className={styles.p}>©2022 Karlo-Hosting.com</p>
</div>
</div>
)
}
My code is above.
If the server sends you a response thats say "received text/html; charset=utf-8", try to analyse the error. You can see that the server says "Here is your requested text/HTML content that has the UTF-8 format".
Check if the source of the image is correct. And if the image exists and try to check what text/HTML content the file server sends back to you.
Solution 1. this error is in terminal right, so 'public' folder is exposed at root level, so you need not specify the public folder
try this - src="/logoicon/logoOrange.png"
instead of - src="/public/logoicon/logoOrange.png"
Solution 2.still if you get 400 bad request error in console
then its a generic client error
check for-> a) URL string syntax b) corrupted cache and cookie c) check if image is too big d) check for any whitespaces in naming folder